<template>
  <el-dialog
    v-model="dialogFormVisible"
    title="商机流转过程"
    width="1000px"
    @close="close"
  >
    <el-table v-loading="listLoading" :data="BusinessPath">
      <el-table-column
        align="center"
        label="商机ID"
        prop="OrderID"
        show-overflow-tooltip
        width="70"
      />
      <el-table-column
        align="center"
        label="商机时间"
        prop="addTime"
        show-overflow-tooltip
        width="180"
      />
      <el-table-column
        align="center"
        label="挑入跟进人"
        prop="SaleStaffName"
        show-overflow-tooltip
        width="120"
      />
      <el-table-column
        align="center"
        label="商机状态"
        prop="OrderFlowState"
        show-overflow-tooltip
      />
      <el-table-column align="center" label="备注" width="200">
        <template #default="{ row }">
          <div>{{ row.GiveupTrackTime }}</div>
          <div>{{ row.GiveupTrackMemo }}</div>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
  import { getBusinessPath } from '@/api/business'
  export default defineComponent({
    name: 'BusinessPath',
    setup() {
      // const $baseMessage = inject('$baseMessage')

      const state = reactive({
        formRef: null,
        form: {
          roles: [],
        },
        rules: {
          title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
        },
        dialogFormVisible: false,
        BusinessPath: [],
        queryForm: {
          CustomerPickID: 0,
          OrderID: 0,
          pageNo: 1,
          pageSize: 10,
          title: '',
        },
      })

      const showEdit = (OrderID) => {
        state.queryForm.OrderID = OrderID
        fetchData()
        state.dialogFormVisible = true
      }
      const close = () => {
        state['formRef'].resetFields()
        state.form = {
          roles: [],
        }
        state.dialogFormVisible = false
      }
      const fetchData = async () => {
        state.listLoading = true
        const {
          data: { list, total },
        } = await getBusinessPath(state.queryForm)
        state.BusinessPath = list
        state.total = total
        state.listLoading = false
      }
      return {
        ...toRefs(state),
        showEdit,
        close,
        fetchData,
      }
    },
  })
</script>
